import React, { memo, useEffect } from 'react';
import { Row, Col, Button, Card, Avatar } from 'tdesign-react';
import { IconFont } from 'tdesign-icons-react';
import { BrowserRouterProps } from 'react-router-dom';
import { visitData } from './chart';
import useDynamicChart from 'hooks/useDynamicChart';

import styles from './index.module.less';
import { useAppDispatch, useAppSelector } from '../../modules/store';
import { IUserInfo } from '../../api/user';
import { getTimeState } from '../../utils/time';
import { toUpperCaseFirst } from '../../utils/string';
import { OSS_PREFIX } from '../../configs/oss';
import { getUser, selectUserBase } from '../../modules/user';

const User: React.FC<BrowserRouterProps> = () => {
  const userState = useAppSelector(selectUserBase);
  const { userInfo } = userState;
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(getUser());
  }, []);
  const info = userInfo as IUserInfo;
  const hello = `${getTimeState()}, 欢迎加入我们这个家庭 ~ `;
  const chartData = useDynamicChart(visitData, {
    placeholderColor: ['legend.textStyle.color', 'xAxis.axisLabel.color', 'yAxis.axisLabel.color'],
  });
  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col xs={12} lg={12} xl={9}>
          <Card className={styles.welcome} bordered={false}>
            <Row justify='space-between'>
              <Col className={styles.name}>
                Hi，{toUpperCaseFirst(info.name)} <span className={styles.regular}>{hello}</span>
              </Col>
              <Col>
                {info.avatar ? (
                  <Avatar alt='' image={`${OSS_PREFIX}${info.avatar}`} size='large' />
                ) : (
                  <Avatar alt='' size='large'>
                    {info.name?.charAt(0).toUpperCase()}
                  </Avatar>
                )}
              </Col>
            </Row>
          </Card>
          <Card
            className={styles.userinfo}
            title='个人信息'
            bordered={false}
            actions={
              <Button shape='square' theme='default' variant='text'>
                <IconFont name='edit' />
              </Button>
            }
            header
          >
            <Row gutter={[16, 16]}>
              <Col span={3}>
                <div className={styles.label}>手机</div>
                <div className={styles.value}>+86 {info.phone}</div>
              </Col>
              <Col span={3}>
                <div className={styles.label}>性别</div>
                <div className={styles.value}>{info.sex ? '小姐姐' : '小哥哥'}</div>
              </Col>
              <Col span={3}>
                <div className={styles.label}>个人邮箱</div>
                <div className={styles.value}>1920132572@qq.com</div>
              </Col>
              <Col span={3}>
                <div className={styles.label}>座位</div>
                <div className={styles.value}>T32F 012</div>
              </Col>
            </Row>
            <Row gutter={[16, 16]}>
              <Col span={3}>
                <div className={styles.label}>管理主体</div>
                <div className={styles.value}>遵义市奥体中心游泳馆</div>
              </Col>
              <Col span={3}>
                <div className={styles.label}>职称</div>
                <div className={styles.value}>管理员</div>
              </Col>
              <Col span={3}>
                <div className={styles.label}>入职时间</div>
                <div className={styles.value}>2021-07-01</div>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <div className={styles.label}>所属团队</div>
                <div className={styles.value}>管理部</div>
              </Col>
            </Row>
          </Card>
        </Col>
        <Col xs={12} lg={12} xl={3}></Col>
      </Row>
    </div>
  );
};

export default memo(User);
